<template>
  <div class="alert-list-root"
      :class="{'hidden-list': hidden}"
      :style="{height: height}">
    <div class="header-box">
      <div class="title"><span>告警消息</span></div>
      <div class="close-btn" @click.prevent.stop="close"></div>
    </div>
    <div class="list-wrap">
      <scroll-view
        class="alert-list-box"
        :scroll-direction="['y']">
        <div class="alert" v-for="alert in alerts">
          <div class="icon-box">
            <i class="alert-icon"></i>
          </div>
          <div class="alert-content-box">
            <div class="name">
              <span>{{alert.alert_name}}</span>
            </div>
            <div class="alert-content">
              <span>{{alert.content}}</span>
            </div>
            <div class="alert-time">
              <span>{{formatDate(alert.create_date)}}</span>
            </div>
          </div>
          <div class="state" :class="{'is-read': alert.is_read}" @click.stop.prevent="toggleAlertState(alert)">
            <span>{{alert.is_read ? '已处理':'未处理'}}</span>
          </div>
        </div>

        <div class="no-data" v-if="!alerts.length">
          <span>暂无告警记录</span>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import api from 'api'
import formatDate from 'filters/format-date'
import alertDevice from 'alert-device'
import EventListener from 'utils/event-listener'

export default {
  name: 'alertList',

  props: {
    hidden: {
      default: true
    }
  },
  data () {
    return {
      deviceIds: [alertDevice.waterId, alertDevice.electricId],
      toggling: false,
      height: 0,
      alerts: [
        // {
        //   alert_id: '280fa2b181af1800',
        //   alert_name: '管压变送器离线告警',
        //   alert_value: 'offline',
        //   content: '管压变送器离线告警',
        //   create_date: '2017-03-18T15:33:52.461Z',
        //   from: 1080383250,
        //   id: '58cce2e0a493ae7755144455',
        //   is_read: false,
        //   mac: '371D5871990F',
        //   notify_type: 2,
        //   product_id: '160fa6b17a3503e9160fa6b17a35be01',
        //   product_name: '管压变送器',
        //   tags: '轻微',
        //   to: []
        // }
      ]
    }
  },
  computed: {
    queryConditions () {
      let result = {
        'offset': 0,
        'limit': 50,
        'query': {
          'from': {'$in': this.deviceIds}
        },
        'order': {'create_date': 'desc'}
      }
      return result
    },

    unRead () {
      let result = false
      result = this.alerts.some(item => !item.is_read)
      return result
    }
  },

  watch: {
    unRead (val, oldVal) {
      if (val !== oldVal) this.$emit('read-state-change', val)
    },
    hidden (val, oldVal) {
      if (oldVal === true && val === false) {
        this.getAlerts()
      }
    }
  },
  mounted () {
    this.initStyle()
    this.getAlerts()
    this._closeEvent = EventListener.listen(document.body, 'click', this.handleClose)
  },
  beforeDestroy () {
    if (this._closeEvent) {
      this._closeEvent.remove()
    }
  },
  methods: {
    /**
     * 处理组件外点击
     */
    handleClose () {
      if (!this.hidden) {
        this.$emit('close')
      }
    },
    initStyle () {
      this.height = window.document.body.clientHeight - this.$el.offsetTop + 'px'
    },

    getAlerts () {
      api.alert.getAlerts(this.queryConditions).then((res) => {
        this.alerts = _.filter(res.data.list, (item) => {
          return item.tags === '严重'
        })
      }).catch((res) => {
        this.handleError(res)
      })
    },

    toggleAlertState (alert) {
      if (this.toggling) return
      this.toggling = true
      let ids = [alert.id]
      api.alert.readAlerts(ids).then((res) => {
        this.toggling = false
        alert.is_read = true
      }).catch((res) => {
        this.toggling = false
        this.handleError(res)
      })
    },

    formatDate (date) {
      return formatDate(date)
    },

    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus">

.alert-list-root
  position absolute
  right 0
  top 101%
  width 350px
  height 100%
  background #1e1e1e
  overflow hidden
  padding 60px 20px 20px
  box-sizing border-box
  transition all ease 0.3s
  box-shadow -3px 3px 5px 3px rgba(0,0,0,0.25)
  &.hidden-list
    transform translate(100%)

  .header-box
    position absolute
    top 0
    left 10px
    height 60px
    width 320px
    border-bottom 1px solid #434343
    .title
      font-size 22px
      font-weight 400
      line-height 60px
      padding-left 10px
    .close-btn
      position absolute
      right 0
      top 50%
      margin-top -15px
      width 30px
      height 30px
      line-height 30px
      text-align center
      cursor pointer
      background:url('../../../../assets/images/u508.png') no-repeat center center / 25px auto


  .alert-list-box
    width 100%
    height 100%
    box-sizing border-box
    .alert
      position relative
      padding 20px 20px 10px 50px
      box-sizing border-box
      font-size 12px
      width 100%
      min-height 100px
      border-bottom 1px dashed #434343
      &:last-child
        border-bottom 0
      .icon-box
        position absolute
        left 0px
        top 20px
        width 40px
        min-height 60px
        font-size 25px
        padding-left 10px
        box-sizing border-box

        .alert-icon
          display inline-block
          width 36px
          height 36px
          background no-repeat url('../../../../assets/images/u145.png') top left /25px auto

      .alert-content-box
        width 100%
        height 100%
        padding-bottom 5px
        box-sizing border-box

        .name
          height 25px
          font-size 13px
          overflow hidden
        .alert-content
          padding-bottom 5px
        .alert-time
          color #666
      .state
        position absolute
        right 5px
        top 40px
        padding 1px 3px
        color #fff
        background #c33531
        cursor pointer
        &.is-read
          cursor default
          color #999
          background #434343

    .no-data
      width 100%
      height 50px
      line-height 50px
      color #666
.list-wrap
  height 100%
  width 100%
  overflow hidden
</style>
